<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple File System Demo | Ice for JavaScript</title>
    <link rel="icon" type="image/x-icon" href="../../../assets/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../../../assets/common.css" />
    {{#cssDeps}}
    <link rel="stylesheet" type="text/css" href="{{.}}"/>
    {{/cssDeps}}
  </head>
  <body>
    <!-- Header section that contains title and navigation bar -->
    <section id="header">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href="../../../index.html">Ice for JavaScript</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#" id="viewReadme">Readme</a></li>
                    <li><a href="#" id="viewSource">Source</a></li>
                </ul>
            </section>
        </nav>
        <ul class="breadcrumbs">
            <li><a href="../../../index.html">Ice</a></li>
            <li><a href="../../index.html">Demos</a></li>
            <li class="current"><a href="#">Simple File System</a></li>
        </ul>
    </section>
    <!-- Main section that contains the user interface -->
    <section role="main" id="body">
        <div class="row">
            <div class="large-12 medium-12 columns">
                <form>
                    <div class="row">
                        <div class="small-12 columns">
                            <a href="#" class="button small" id="run">Run</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-12 columns">
                            <textarea id="output" readonly></textarea>
                        </div>
                    </div>
                    <div id="progress" class="row hide">
                        <div class="small-12 columns left">
                            <div class="inline left icon"></div>
                            <div class="text">Sending Request...</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- Modal dialog to show the client README -->
    <div id="readme-modal" class="reveal-modal medium" data-reveal>
        <div class="contents">
            <h4>Simple File System Demo Readme</h4>
            <hr/>
            <p>This demo implements the simple filesystem application shown at the
                end of the Javascript client-side mapping chapter.</p>
            <p>
                To run the demo, first you need to start a Manual filesystem server from
                another language mapping (Java, C++, C#, or Python). For the server to
                communicate with the browser you need to start it with WS as it's default
                protocol. This is done by setting the Ice.Default.Protocol option. For the
                python server this would look like
                <pre>
                    python server.py --Ice.Default.Protocol=ws
                </pre>
            </p>
            <p>Then you can use the <strong>"Run"</strong> button to run this client.</p>
            <h4>Using the minified scripts</h4>
            <p>When the demo is built with optimizations enabled it creates a minified
            script <code>Client.min.js</code> that includes:
            </p>
            <ul>
                <li><code>es5/Ice.js</code> (The Ice run-time library)</li>
                <li><code>es5/generated/Filesystem.js</code> (The generated code for this demo)</li>
                <li><code>es5/browser/Client.js</code> (The demo source)</li>
            </ul>
            <p>To use the minified version you should edit the <code>js/Manual/simpleFileSystem/index.html</code>
                file and comment out the non-optimized scripts:</p>
            <pre>
                &lt;!--
                Scripts used during development, for optimized builds comment
                the following scripts and uncomment es5/browser/Client.min.js
                below
                --&gt;
                &lt;!-- Ice.js (Ice run-time library) --&gt;
                &lt;script type="text/javascript" src="../../../node_modules/ice/lib/es5/Ice.js"&gt;&lt;/script&gt;
                &lt;!-- Filesystem.js (Demo generated code) --&gt;
                &lt;script type="text/javascript" src="es5/generated/Filesystem.js"&gt;&lt;/script&gt;
                &lt;!-- Client.js (Simple File System Demo Application) --&gt;
                &lt;script type="text/javascript" src="es5/browser/Client.js"&gt;&lt;/script&gt;
            </pre>
            <p>Then uncomment the script tag for the minified version</p>
            <pre>
                &lt;!--
                Uncomment the following script to use a minified version of the
                scripts that includes: the Ice run-time library, the generated
                code and the demo application.
                --&gt;
                &lt;!--&lt;script src="es5/browser/Client.min.js"&gt;&lt;/script&gt;--&gt;
            </pre>
        </div>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <!-- Modal dialog to show the client source code -->
    <div id="source-modal" class="reveal-modal" data-reveal>
        <a class="close-reveal-modal">&#215;</a>
        <dl class="tabs" data-tab>
            <dt></dt>
            <dd class="active"><a href="#panel2-1">Slice</a></dd>
            <dd><a href="#panel2-2">JavaScript</a></dd>
            <dd><a href="#panel2-3">HTML</a></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel2-1">
                <h6>File: Manual/simpleFileSystem/Filesystem.ice</h6>
                <pre class="source language-c" data-code="Filesystem.ice"></pre>
            </div>
            <div class="content" id="panel2-2">
                <h6>File: Manual/simpleFileSystem/browser/Client.js</h6>
                <pre class="source" data-code="browser/Client.js"></pre>
            </div>
            <div class="content" id="panel2-3">
                <h6>File: Manual/simpleFileSystem/index.html</h6>
                <pre class="source" data-code="index.html"></pre>
            </div>
        </div>
    </div>
    <!-- Footer section -->
    <section id="footer" class="show-for-medium-up">
        <div class="logo">
            <h4><strong>ZeroC</strong></h4>
        </div>
        <div class="copyright">
            <h6>Copyright &copy; ZeroC, Inc. All rights reserved.</h6>
        </div>
    </section>
    <!-- Common dependencies -->
    {{#jsDeps}}
    <script src="{{.}}"></script>
    {{/jsDeps}}
    <script type="text/javascript" src="../../../assets/es5/common.js"></script>
    <!-- Babel dependencies -->
    <script type="text/javascript" src="../../../node_modules/core-js-bundle/minified.js"></script>
    <script type="text/javascript" src="../../../node_modules/regenerator-runtime/runtime.js "></script>
    <!--
      Scripts used during development, for optimized builds comment
      the following scripts and uncomment es5/browser/Client.min.js
      below
    -->
    <!-- Ice.js (Ice run-time library) -->
    <script type="text/javascript" src="../../../node_modules/ice/lib/es5/Ice.js"></script>
    <!-- Filesystem.js (Demo generated code) -->
    <script type="text/javascript" src="es5/generated/Filesystem.js"></script>
    <!-- Client.js (Filesystem Demo Application) -->
    <script type="text/javascript" src="es5/browser/Client.js"></script>
    <!--
      Uncomment the following script to use a minified version of the
      scripts that includes: the Ice run-time library, the generated
      code and the demo application.
    -->
    <!--<script type="text/javascript" src="es5/browser/Client.min.js"></script>-->
    <script type="text/javascript">
        /* jshint browser:true, jquery:true */
        /* global checkGenerated: false */
        if(["http:", "https:"].indexOf(document.location.protocol) !== -1)
        {
            checkGenerated(["es5/generated/Filesystem.js"]);
        }
    </script>
  </body>
</html>
